<template>

  <div id="mapdiv"></div>

</template>

<script>
export default {
  name: 'testmap',
  data(){
    return{
      nowLng:0,
      nowLat:0,
      spList:[],
      map:null,
      circleLayer:null,
      markerLayer:null,
      nowPoint:{
        lng:1,
        lat:1
      },
      keyframe: [
        {
          percentage: 0, // 动画过程中该关键帧的百分比,
          rotation: 0, // 地图在水平面上的旋转角度。
        },

        {
          percentage: 0.5,
          rotation: 180,
        },

        {
          percentage: 1,
          rotation: 360,
        },
      ]
    }
  },
  methods:{
    initMap () {
      // 定义地图中心点坐标
      var center = new window.TMap.LatLng(43.886846,125.324904)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById('mapdiv'), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        // rotation: 45 // 设置地图旋转角度
      })

      this.map = map;
      this.markerLayer = new window.TMap.MultiMarker({
          map:map,
        styles: {
          //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          "myStyle": new window.TMap.MarkerStyle({
            "width": 25,  // 点标记样式宽度（像素）
            "height": 35, // 点标记样式高度（像素）
            "src": 'http://localhost/static/img/logo.4eeb8a8e.png',  //图片路径
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            "anchor": { x: 16, y: 32 }
          })
        },

      });

      this.circleLayer = new window.TMap.MultiCircle({
        map,
        styles: { // 设置圆形样式
          'circle': new window.TMap.CircleStyle({
            'color': 'rgba(41,91,255,0.16)',
            'showBorder': true,
            'borderColor': 'rgba(41,91,255,1)',
            'borderWidth': 2,
          }),
        },
      })
    },
  },
  mounted() {

   this.spList = this.$store.getters.spList

    this.initMap();

    let makerList = [];
    let circleList = [];
    for (let p in this.spList) {
      makerList[p]={
        "id": p,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        "styleId": 'marker',  //指定样式id
        "position": new  window.TMap.LatLng(this.spList[p].latitude, this.spList[p].longitude),  //点标记坐标位置
        "properties": {
          "title": "marker"+p
        }}

      circleList[p]={
        styleId: 'circle',
        center: new window.TMap.LatLng(this.spList[p].latitude, this.spList[p].longitude), //圆形中心点坐标
        radius: this.spList[p].distance,	//半径（单位：米）
      }

    }

   this.markerLayer.add(makerList)

    this.circleLayer.add(circleList)

    this.nowPoint = this.$store.state.nowPoint;
    this.nowLat=this.nowPoint.lat;
  },
  watch:{
    nowPoint2(newvalue,oldvalue)
    {
      if(this.map != null){
        this.map.setCenter(new window.TMap.LatLng(this.nowPoint.lat,this.nowPoint.lng))
      }

      this.map.startAnimation(this.keyframe, {
        duration: 16000, // 动画周期时长，单位为ms
        loop: Infinity, // 动画周期循环次数，若为Infinity则无限循环，默认为1
      });


    },

  },
  computed:{
    nowPoint2()
    {
      var p = {}
      if(this.nowPoint.lng != -1 && this.nowPoint.lat != -1) {
        p.lng = this.nowPoint.lng;
        p.lat = this.nowPoint.lat;

      }else{
        p.lng = 125.324904;
        p.lat = 43.886846;
      }
      return p
    },
  }
}
</script>

<style scoped>

</style>
